<template>
    <el-container style="height: 100vh; border: 1px solid #eee;">
        <!-- Header -->
        <el-header style="text-align: left; font-size: 14px;">
            <el-menu mode="horizontal" default-active="1" class="menu">
                <el-menu-item index="1" class="a">
                    <router-link to="/">学生综合服务管理系统</router-link>
                </el-menu-item>
                <el-menu-item index="index" class="a">
                    <router-link to="/index">系统1</router-link>
                </el-menu-item>
                <el-menu-item index="index2" class="a">
                    <router-link to="/index2">系统2</router-link>
                </el-menu-item>
                <el-menu-item index="login" class="a">
                    <router-link to="/login">登录</router-link>
                </el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <!-- Main Content -->
            <el-main class="main-content">
                <el-card class="box-card">
                    <div slot="header" >
                        <span>系统页面</span>
                    </div>
                    <div>
                        <!-- 你可以在这里添加其他内容 -->
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
/* Container Styles */
a{
  text-decoration: none;
}
/* Header Styles */
.el-header {
  background-color: #ffffff; /* 与 Login.vue 的背景色一致 */
  border-bottom: 1px solid #ddd; /* 与 Login.vue 的分隔线一致 */
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 全局样式 */
.el-menu-item:hover {
  background-color: #f0f2f5 !important; /* 悬浮背景色 */
  color: #409EFF !important; /* 悬浮文字颜色 */
}


/* Main Content Styles */
.main-content {
  padding: 20px;
}

/* Card Styles */
.box-card {
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 与 Login.vue 一致 */
}

</style>

<script>
export default {
    data() {
        return {
            // 可以在这里添加组件数据
        }
    }
};
</script>